<!--
 * @Author: liaoxing
 * @Date: 2022-01-14 18:20:21
 * @LastEditors: liaoxing
 * @LastEditTime: 2022-01-17 09:44:35
 * @Description: liaoxing created
 * @FilePath: \品新集成管理系统\pin-xin-admin\src\views\quote\params\collapsItem\slaveMaterial.vue
-->
<template>
  <div class="collapsItemFixture">
    <el-table :data="slaveData" border style="width: 1200px">
      <el-table-column type="index" label="序号" :align="'center'" width="50"></el-table-column>
      <el-table-column label="物料编码">
        <template slot-scope="scope">
          <template v-if="slaveMaterialIndex == scope.$index">
            <el-select
              v-model="slaveData[scope.$index]"
              filterable
              remote
              reserve-keyword
              :value-key="'materialCode'"
              :name="'materialCode'"
              placeholder="请输入物料编码"
              :remote-method="remoteSlaveMethod"
              :loading="loading"
            >
              <el-option
                v-for="item in slaveOptions"
                :key="item.materialCode"
                :label="item.materialCode"
                :value="item"
              ></el-option>
            </el-select>
          </template>
          <span v-else>{{ scope.row.materialCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用量">
        <template slot-scope="scope">
          <template v-if="slaveMaterialIndex == scope.$index">
            <el-input v-model="scope.row.qty" placeholder="请输入用量"></el-input>
          </template>
          <span v-else>{{ scope.row.qty }}</span>
        </template>
      </el-table-column>
      <el-table-column label="物料名称">
        <template slot-scope="scope">
          <span>{{ scope.row.materialName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="规格型号">
        <template slot-scope="scope">
          <span>{{ scope.row.materialSpec }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单位">
        <template slot-scope="scope">
          <span>{{ scope.row.materialUnit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <template v-if="slaveMaterialIndex == scope.$index">
            <span
              class="jstarfont jstar-baocun finger color-blue"
              @click="saveItem('slaveMaterial')"
            ></span>
            <span
              style="margin-left: 10px"
              class="jstarfont jstar-guanbi finger color-blue"
              @click="cancelEdit(scope.$index, 'slaveMaterial')"
            ></span>
          </template>
          <template v-else>
            <span
              class="jstarfont jstar-bianji1 finger color-blue"
              @click="openEditItem(scope.$index, scope.row, 'slaveMaterial')"
            ></span>
            <el-popconfirm
              title="确定删除改行吗？"
              @confirm="deleteItem(scope.$index, 'slaveMaterial')"
            >
              <span
                slot="reference"
                style="margin-left: 10px"
                class="jstarfont jstar-shanchutianchong finger color-blue"
              ></span>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      type="primary"
      style="margin-top: 16px"
      icon="el-icon-plus"
      @click="addItem('slaveMaterial')"
    >添加行</el-button>
  </div>
</template>

<script>
export default {
  name: "",
  props: [''],
  data () {
    return {
      slaveMaterialIndex: null,
      slaveMaterialEditItem: '',
      loading: false,
      slaveOptions: [],
      slaveList: [],
      slaveData: [],
    }
  },
  async created () {
    // await this.getSlaveMaterial0()
    await this.getSlaveMaterialList()
  },
  methods: {
    cancelBtn() {
      this.$confirm('确定取消填写，返回上一页吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$router.push({ path: '/quote/index' })
      })
    },
    // addFloatNum(num1, num2) {
    //   var sq1, sq2, m
    //   try {
    //     sq1 = num1.toString().split('.')[1].length
    //   } catch (e) {
    //     sq1 = 0
    //   }
    //   try {
    //     sq2 = num2.toString().split('.')[1].length
    //   } catch (e) {
    //     sq2 = 0
    //   }
    //   m = Math.pow(10, Math.max(sq1, sq2))
    //   return (num1 * m + num2 * m) / m
    // },
    /* 计算工治具 */
    // computedFixturePrice(item, index) {
    //   this.$set(
    //     this.slaveData[index],
    //     'amount',
    //     (item.price * 10000 * (item.qty * 1)) / 10000
    //   )
    // },
    remoteSlaveMethod(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.slaveOptions = this.slaveList.filter((item) => {
            return (
              item.materialCode.toLowerCase().indexOf(query.toLowerCase()) > -1
            )
          })
        }, 200)
      } else {
        this.slaveOptions = []
      }
    },
    /* 查询辅料清单 */
    getSlaveMaterial0() {
      return new Promise((resolve) => {
        this.$quote
          .getSlaveMaterial0(this.$route.query.id)
          .then((res) => {
            if (res.code == 200) {
              this.slaveData = res.data.rows
            } else {
              this.$message.error(res.code + '-' + res.msg)
            }
            resolve()
          })
          .catch((err) => {
            this.$message.error(JSON.stringify(err))
          })
      })
    },
    /* 查询辅料 */
    getSlaveMaterialList() {
      return new Promise((resolve) => {
        this.$quote
          .getSlaveMaterialList(this.$route.query.id)
          .then((res) => {
            if (res.code == 200) {
              this.slaveList = res.data.rows
            } else {
              this.$message.error(res.code + '-' + res.msg)
            }
            resolve()
          })
          .catch((err) => {
            this.$message.error(JSON.stringify(err))
          })
      })
    },
    openEditItem(index, item, propsName) {
      this[propsName + 'EditItem'] = JSON.stringify(item)
      this[propsName + 'Index'] = index
    },
    cancelEdit(index, propsName) {
      this.slaveData[index] = JSON.parse(
        this[propsName + 'EditItem']
      )
      this.$nextTick(() => {
        this[propsName + 'Index'] = null
      })
    },
    saveItem(propsName) {
      this[propsName + 'Index'] = null
    },
    deleteItem(index, propsName) {
      this.slaveData.splice(index, 1)
    },
    addItem(propsName) {
      let temp = {
        slaveMaterial: {
          materialCode: '',
          qty: '',
          materialName: '',
          materialSpec: '',
          materialUnit: '',
          useStage: '',
        },
      }
      this.slaveData.push(temp[propsName])
      this.$nextTick(() => {
        this[propsName + 'EditItem'] = JSON.stringify(temp[propsName])
        this[propsName + 'Index'] = this.slaveData.length - 1
      })
    }
  }
}
</script>

<style lang="less">
.collapsItemFixture{

}
</style>